<template>
  <Card>
    <Row type="flex"
         align="middle"
         justify="space-between"
         class="margin-b-20">
      <Button icon="md-add"
              type="primary"
              @click="onAddShopModal()">添加老师</Button>
    </Row>
    <Table border
           :loading="tableLoading"
           :columns="columns"
           :data="alarmList">
    </Table>

    <Row type="flex"
         class="margin-t-20">
      <Page :total="pageTotal"
            @on-change="changePage" />
    </Row>

    <Modal v-model="addTeacherModel"
           :title="teacherType ? '编辑老师' :'添加老师'"
           :loading="loading"
           :mask-closable="false"
           @on-ok="onTeacherSubmit"
           @on-visible-change="onAddTeacherVisible">
      <Form ref="addTeacherForm"
            :model="teacher"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="所属场馆"
                  prop="storeId">
          <Select style="width:200px"
                  v-model="teacher.storeId"
                  clearable>
            <Option v-for="(item, index) in shopList"
                    :key="index"
                    :value="item.id">{{ item.storeName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="姓名"
                  prop="realname">
          <Input v-model="teacher.realname"
                 style="width:200px"></Input>
        </FormItem>
        <FormItem label="授课课程"
                  prop="course">
          <Input v-model="teacher.course"
                 style="width:200px"></Input>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>
<script>
import { teacherList, addTeacher, updateTeacher, deleteTeacher } from '@/api/setting-teacher'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 弹框
      loading: true,
      addTeacherModel: false,
      teacherType: 0,
      teacher: {
        realname: '',
        storeId: '',
        course: ''
      },
      ruleValidate: {
        realname: [{ required: true, message: '请入输姓名', trigger: 'blur' }],
        storeId: [
          { required: true, type: 'number', message: '请选择所属场馆', trigger: 'change' }
        ],
        course: [
          {
            required: true,
            message: '请输入授课课程',
            trigger: 'blur'
          }
        ]
      },
      // 列表数据
      tableLoading: false,
      columns: [
        {
          title: '老师',
          key: 'realname'
        },
        {
          title: '所属场馆',
          key: 'storeId',
          render: (h, params) => {
            for (let i of this.shopList) {
              if (params.row.storeId === i.id) {
                return h(
                  'span',
                  {},
                  i.storeName
                )
              }
            }
          }
        },
        {
          title: '课程',
          key: 'course'
        },
        {
          title: '操作',
          width: 150,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.onAddShopModal(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.deleteTeacher(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      alarmList: [],
      pageTotal: 0,
      // 筛选条件
      formSearch: {
        size: 10,
        page: 1,
        storeId: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'shopList'
    ])
  },
  created () {
    this.getTeacherList()
  },
  methods: {
    onAddShopModal (info) {
      this.addTeacherModel = true
      if (info) {
        this.teacherType = 1
        this.teacher = { ...info }
      } else {
        this.teacherType = 0
      }
    },
    getTeacherList () {
      this.tableLoading = true
      teacherList(this.formSearch).then(res => {
        this.alarmList = res.data.records
        this.pageTotal = res.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onAddTeacherVisible (visible) {
      // 弹框状态改变 清除默认值
      if (visible) return
      this.$refs['addTeacherForm'].resetFields()
    },
    onTeacherSubmit () {
      this.$refs['addTeacherForm'].validate(valid => {
        // eslint-disable-next-line no-useless-return
        setTimeout(() => {
          this.loading = false
        }, 300)
        setTimeout(() => {
          this.loading = true
        }, 400)
        console.log(valid)
        if (!valid) return
        this.teacherType ? this.updateTeacher() : this.addTeacher()
      })
    },
    addTeacher () {
      addTeacher(this.teacher).then(res => {
        this.$refs['addTeacherForm'].resetFields()
        this.addTeacherModel = false
        this.$Message.success('添加成功')
        this.getTeacherList()
      })
    },
    updateTeacher () {
      updateTeacher(this.teacher).then(res => {
        this.$refs['addTeacherForm'].resetFields()
        this.addTeacherModel = false
        this.$Message.success('修改成功')
        this.getTeacherList()
      })
    },
    deleteTeacher (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除？',
        loading: true,
        okText: '删除',
        onOk: () => {
          deleteTeacher(id)
            .then(res => {
              this.$Modal.remove()
              this.$Message.success('删除成功')
              this.getTeacherList()
            })
            .catch(() => {
              this.$Modal.remove()
            })
        }
      })
    },
    changePage (val) {
      this.formSearch = { ...this.formSearch, page: val }
      this.getTeacherList()
    }
  }
}
</script>
<style lang="less">
.userAssets {
  position: relative;
  font-size: 16px;
  text-align: center;
  .userAssets-num {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
